<template>

	<view class="conter">
		<view class="inner">

			<text class="label">图片</text>
			<view class="rowImg" v-for="(item, index) in imgsArr" :key="index">
				<up-lazy-load :image="item" img-mode='widthFix'></up-lazy-load>
			</view>



			<text class="label">描述</text>


			<view class="rowDesc">
				{{acceptinfoDetails.desc}}
			</view>
		</view>
		<view class="Btn" v-if="params.check == 1">
			<button type="default" @click="zg(2)" class="rectification">
				整改
			</button>

			<button type="primary" @click="ys(1)" class="passed">
				验收通过
			</button>
		</view>
	</view>



	<up-popup :show="enterShow" @close="Enterclose" mode="center" :round="10" :closeable="true"
		:closeOnClickOverlay="false">
		<view class="formRow">
			<view class="icon">
				<image src="https://img.zhizhuangtong.com/project_media/img/xcx/khd/icon2.png" mode=""></image>
			</view>
			<view class="label">验收通过后此需求将结束，平台
				将对您支付的施工费用，结算给施工企业！</view>
			<view class="text">确定验收通过吗？</view>
			<viwe class="footer">
				<button class="close" @click="Enterclose">取消</button>
				<button class="save" @click="constructionAcceptance(1)">确定</button>
			</viwe>

		</view>
	</up-popup>


	<up-popup :show="enterShow2" @close="Enterclose2" mode="center" :round="10" :closeable="true"
		:closeOnClickOverlay="false">
		<view class="formRow">
			<view class="title">
				整改
			</view>

			<view class="row2">
				<up-textarea placeholder="请输入描述" v-model="params.msg" clearable :maxCount="300"></up-textarea>
			</view>

			<viwe class="footer">
				<button class="close" @click="Enterclose2">取消</button>
				<button class="save" @click="constructionAcceptance(2)">确定</button>
			</viwe>

		</view>
	</up-popup>




</template>

<script setup>
	import {
		ref,
		onMounted,
		defineExpose,
		watch
	} from 'vue';
	import {
		onLoad,
		onReady,
		onShow,
		onHide,
	} from '@dcloudio/uni-app'
	import {
		accept_info,
		build_accept,
		acceptData
	} from '@/api/require.js';
	// 确认验收吗
	const enterShow = ref(false) //施工验收通过
	const enterShow2 = ref(false) //整改
	const acceptinfoDetails = ref({})
	const imgsArr = ref([])

	const type = ref('')
	const params = ref({
		id: '',
		demand_id: '',
		status: '',
		msg: '',
		check: '',
	})
	onLoad((option) => {
		console.log('----', option)
		if (option.id) {
			params.value.id = option.id;
			// params.value.check = option.check;
			type.value = option.type;
			// console.log('type',type.value)
			if (!type.value) {
				// console.log('详情的施工验收')
				// 详情的施工验收
				queryDemandDetails()
			} else {
				// console.log('列表按钮')
				// 列表按钮
				queryDemandDetails2()
			}
		}
	})

	onMounted(() => {

	});

	const queryDemandDetails = async () => {
		const res = await accept_info({
			accept_id: params.value.id
		});
		if (res.code === 1) {
			console.log('详情的施工验收详情的施工验收', res.data)
			acceptinfoDetails.value = res.data.accept
			imgsArr.value = res.data.accept.imgs.split(',').filter(img => img);
			params.value.demand_id = res.data.accept.demand_id
			params.value.check = res.data.check
		} else {
			uni.showToast({
				icon: 'none',
				title: res.msg
			})
		}
	}


	const queryDemandDetails2 = async () => {
		const res = await acceptData({
			id: params.value.id
		});
		if (res.code === 1) {
			console.log('列表按钮列表按钮列表按钮', res.data)
			acceptinfoDetails.value = res.data.accept
			imgsArr.value = res.data.accept.imgs.split(',').filter(img => img);
			params.value.demand_id = res.data.accept.demand_id
		} else {
			uni.showToast({
				icon: 'none',
				title: res.msg
			})
		}
	}



	//显示 整改
	const zg = () => {
		params.value.status = 2
		params.value.msg = ''
		enterShow2.value = true
	}
	//关闭 整改
	const Enterclose2 = () => {
		enterShow2.value = false
	}


	// 验收  
	const constructionAcceptance = async (type) => {
		if (type === 2 && !params.value.msg) {
			uni.showToast({
				icon: 'none',
				title: '请输入整改意见'
			});
			return;
		}

		try {
			const res = await build_accept({
				id: params.value.demand_id,
				status: params.value.status,
				msg: params.value.msg
			});
			if (res.code === 1) {
				console.log(res.data);

				if (type === 1) {
					enterShow.value = false;
					uni.showToast({
						icon: 'none',
						title: '验收通过'
					});
				} else {
					enterShow2.value = false;
					uni.showToast({
						icon: 'none',
						title: '整改完成'
					});
				}
				setTimeout(() => {
					uni.$emit('refreshIfNeeded', true);
					uni.navigateBack({
					delta: 1
					})
				}, 500);

			} else {
				// Handle failure response
				uni.showToast({
					icon: 'none',
					title: res.msg
				});
			}

		} catch (error) {
			// Handle any unexpected errors
			uni.showToast({
				icon: 'none',
				title: '请求失败，请稍后重试'
			});
			console.error(error);
		}
	}



	//显示 验收通过
	const ys = () => {
		params.value.status = 1
		enterShow.value = true
	}

	// 关闭验收
	const Enterclose = () => {
		enterShow.value = false
	}
</script>

<style lang="less" scoped>
	.conter {
		// border: 1px solid red;
		width: 100%;
		height: 100vh;
		// overflow-y: auto;
		padding: 40rpx 32rpx 120rpx;
		box-sizing: border-box;
		background-color: #fff;

		.inner {
			width: 100%;
			overflow: auto;
			height: calc(100% - 60rpx);
		}

		.label {
			width: 100%;
			display: block;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 20rpx;


		}

		.rowImg {
			width: 100%;
			margin-bottom: 20rpx;
			border: 1px solid #F0F0F0;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			overflow: hidden;
			box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(0, 0, 0, 0.08);

			image {
				width: 100%;
				min-height: 200rpx;

				margin-bottom: 20rpx;
			}
		}

		.rowDesc {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 50rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			word-break: break-all;
		}


	}




	.formRow {
		width: 650rpx;
		padding: 0 30rpx;
		box-sizing: border-box;

		.icon {
			margin-top: 40rpx;
			width: 100%;
			height: 125rpx;
			display: flex;
			justify-content: center;

			image {
				width: 125rpx;
				height: 125rpx;
			}
		}

		.title {
			width: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			text-align: center;
		}

		.label {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 36rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin: 20rpx 0;
		}

		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			line-height: 36rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin-bottom: 40rpx;
		}

		::v-deep .u-textarea {
			border: 1rpx solid #DFDFDF;
			height: 200rpx;
			background: #F3F3F3;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}


		.footer {
			display: flex;
			width: 100%;
			margin-top: 30rpx;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			justify-content: space-between;

			button {
				width: 270rpx !important;
				height: 88rpx !important;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				line-height: 88rpx;
				text-align: center;
				font-style: normal;
				border-radius: 14rpx;
			}

			.close {
				color: #333333;
				background: #F0F0F0;
			}

			.save {
				background: linear-gradient(95deg, #ECB86C 0%, #CC9F5F 100%);
				color: #FFFFFF;
			}
		}
	}

	.Btn {
		height: calc(120rpx + env(safe-area-inset-bottom));
		height: calc(120rpx + constant(safe-area-inset-bottom));
		width: 100%;
		padding: 0 20rpx;
		height: 120rpx;
		box-shadow: 0rpx -4rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		button {
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.rectification {
			width: 35%;
			height: 88rpx;
			background: #F47575;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}

		.passed {
			width: 60%;
			height: 88rpx;
			background: linear-gradient(115deg, #F2BD6F 0%, #CCA05F 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}


	}
</style>